<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校园办公系统认证页面</title>
		<style type="text/css">
			.bg {
				background-color: purple;
			}

			.reg {
				text-align: right;
			}

			a {
				font-style: inherit;
				font-family: 'Courier New', Courier, monospace;
			}

			#box {
				background-color: white;
				width: 30%;
				height: 35%;
				position: absolute;
				float: right;
				right: 30%;
				top: 25%;
			}

			table {
				text-align: center;
				margin: 0 auto;
			}

			#td1 {
				text-align: right;
				font-size: 20px;
				color: #6600ff;
			}

			#td2 {
				text-align: left;
			}

			label {
				color: red;
				font-weight: bold;
			}

			h3 {
				width: 500px;
				height: 40px;
				padding: 8px auto;
				font-size: 28px;
				text-align: center;
				font-family: 隶书;
				color: #0033ff;
				margin: 0 auto;
				margin-bottom: 8px;
			}

			input {
				height: 24px;
			}
		</style>
		<script>
			var flag1 = false;
			var flag2 = false;
			var flag3 = false;

			function $(id) {
				return document.getElementById(id);
			}

			function checkcardno() {
				var cno = myform.cardno.value;
				$("err_cardno").innerHTML = "";
				if (cno == "" || cno == null) {
					$("err_cardno").innerHTML = "*用户名不能为空！";
					return;
				}
				if (cno.length < 4 || cno.length > 20) {
					$("err_cardno").innerHTML = "*用户名长度为4~20！";
					return;
				}
				var userMatch = /^[a-zA-Z][a-zA-Z0-9_]*$/;
				if (!cno.match(userMatch)) {
					$("err_cardno").innerHTML = "*以英文字母开头，只能包含数字，字母，下划线！";
					return;
				}
				flag1 = true;
			}

			function checkkey() {
				var key1 = myform.key.value;
				$("err_key").innerHTML = "";
				if (key1 == "" || key1 == null) {
					$("err_key").innerHTML = "*密码不能为空！";
				} else {
					if (key1.length < 8 || key1.length > 15) {
						$("err_key").innerHTML = "*密码长度为8~15位！";
					}
				}
				flag2 = true;
			}

			function checkkey2() {
				var key21 = myform.key2.value;
				var key11 = myform.key.value;
				$("err_key2").innerHTML = "";
				if (key21 == "" || key21 == null) {
					$("err_key2").innerHTML = "*确认密码不能为空";
				} else if (key21 != key11) {
					$("err_key2").innerHTML = "*输入的两次密码不一致！";
				}
				flag3 = true;
			}

			function login() {
				if (flag1 && flag2 && flag3) {
					var cno = myform.cardno.value;
					var key1 = myform.key.value;
					if (cno == "suser" && key1 == "12345678") {
						window.location.href = "./success.html";
					} 
					else {
						alert("卡号，口令输入不正确！请重新输入！");
					}
				} 
				else {
					alert("检查卡号或口令输入是否正确！");
				}
			}
		</script>
	</head>
	<body class="bg">
		<div id="box">
			<h3>校园办公系统认证页面</h3>
			<form action="" method="" name="myform">
				<table border="0" cellspacing="" cellpadding="">
					<tr>
						<td id="td1">校园卡号:</td>
						<td id="td2">
							<input type="text" id="" placeholder="请输入校园卡号" name="cardno" onblur="checkcardno()" />
						</td>
						<td>
							<label id="err_cardno"></label>
						</td>
					</tr>
					<tr>
						<td id="td1">口&nbsp;&nbsp;令:</td>
						<td id="td2">
							<input type="text" id="" placeholder="请输入口令" name="key" onblur="checkkey()" />
						</td>
						<td>
							<label id="err_key"></label>
						</td>
					</tr>
					<tr>
						<td id="td1">二次口令:</td>
						<td id="td2">
							<input type="text" id="" placeholder="请确认口令" name="key2" onblur="checkkey2()" />
						</td>
						<td>
							<label id="err_key2"></label>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<input type="button" value="认  证" class="btn1" id="login_btn" onclick="login();" />
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="reset" value="重  置" class="btn2" />
						</td>
					</tr>
				</table>
			</form>
			<div class="reg">
				已经认证？<a href="#">点击查看</a>
			</div>
		</div>
	</body>
</html>
